const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    maskNode : cc.Node = null;

    @property(cc.Node)
    contentNode : cc.Node = null;

    @property(cc.Node)
    btnClose : cc.Node = null;

    @property(cc.Boolean)
    destroyOnClose = false;

    @property
    _oriOpacity : number = null;

    onLoad(){
        if(this.maskNode == null)
            this.maskNode = this.node.getChildByName("Mask");
        if(this.contentNode == null)
            this.contentNode = this.node.getChildByName("Content");
        if(this.btnClose == null)
            this.btnClose = this.node.getChildByName("BtnClose");

        this._oriOpacity = this.maskNode.opacity;
        if(this.btnClose){
            this.btnClose.on(cc.Node.EventType.TOUCH_END,()=>{
                this.hide();
            });
        }
    }

    start(){

    }

    onEnable(){
        this.show();
        //(window as any).test = this;
    }

    show(){
        
        this.maskNode.opacity = 0;
        this.contentNode.scale = 0.2;

        let maskAction = cc.fadeTo(0.5, this._oriOpacity);
        let contentAction = cc.scaleTo(0.2, 1);
        contentAction.easing(cc.easeBackOut());
        this.maskNode.runAction(maskAction);
        this.contentNode.runAction(contentAction);
    }

    hide(){
        this.maskNode.opacity = 0;
        let contentAction = cc.scaleTo(0.2, 0);
        contentAction.easing(cc.easeBackIn());
        this.contentNode.runAction(contentAction);
        this.scheduleOnce(() => {
            if(this.destroyOnClose){
                this.node.destroy();
            } else {
                this.node.active = false;
            }
        }, 0.2);
    }
}